
<template>
  <main-container
    :headerText="'商品库管理 >> 商品添加 ' + (isEdit ? '编辑' : '添加')"
  >
    <div class="content" :key="showPageKey">
      <div class="edit-wrap">
        <div class="top-input">
          <div class="title-text">请填写商品信息</div>

          <div class="item">
            <label for> <span class="tips">* </span>商品名称： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.name"
                placeholder="请输入商品名称"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips">* </span>类型： </label>
            <div class="inline-block">
              <el-select
                v-model="formData.type"
                style="width: 220px"
                placeholder="请选择类型"
                size="small"
              >
                <el-option
                  v-for="(item, index) in typeOpts"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>品牌： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.brandName"
                placeholder="请输入品牌"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips">* </span>成本价： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.floorPrice"
                placeholder="请输入成本价"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <!-- <div class="item">
            <label for> <span class="tips"> </span>京东价格： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.price"
                placeholder="请输入京东价格"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div> -->

          <div class="item">
            <label for> <span class="tips">* </span>卖出价： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.sellingPrice"
                placeholder="请输入卖出价"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>库存： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.inventory"
                placeholder="请输入库存"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <!-- 商家选择 -->
          <div class="item">
            <label for> <span class="tips"> </span>商家选择: </label>
            <div class="inline-block">
              <el-select
                v-model="formData.merchantId"
                style="width: 220px"
                placeholder="请选择商家"
                size="small"
              >
                <el-option
                  v-for="(item, index) in merchantIdOpts"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips">* </span>状态： </label>
            <div class="inline-block">
              <el-select
                v-model="formData.state"
                style="width: 220px"
                placeholder="请选择状态"
                size="small"
              >
                <el-option
                  v-for="(item, index) in stateOpts"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="item img-item">
            <label for> <span class="tips">* </span>商品主图： </label>
            <div class="inline-block">
              <upload-img
                labelName="商品主图"
                :imgArrProp="formData.imagePath"
                :countLimit="1"
                @uploadSuccess="handleUpload_1"
              />
            </div>
          </div>

          <div class="item img-item">
            <label for> <span class="tips"> </span>商品副图： </label>
            <div class="inline-block">
              <upload-img
                labelName="商品副图"
                :imgArrProp="formData.figurePath"
                :countLimit="9"
                @uploadSuccess="handleUpload_2"
              />
            </div>
          </div>

          <div class="item img-item" >
            <label for> <span class="tips"> </span>详情页照片： </label>
            <div class="inline-block" style="max-width: 800px;">
              <upload-img
                labelName="所有详情页照片"
                :imgArrProp="formData.images"
                :countLimit="9"
                @uploadSuccess="handleUpload_3"
              />
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>中评度： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.generalRate"
                placeholder="请输入中评度"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>好评度： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.goodRate"
                placeholder="请输入好评度"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>物流费用： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.logisticsFees"
                placeholder="请输入物流费用"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>规格： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.param"
                placeholder="请输入规格"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>产地： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.productArea"
                placeholder="请输入产地"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>单位： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.saleUnit"
                placeholder="请输入单位"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>描述： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.wareQd"
                placeholder="请输入描述"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>重量： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.weight"
                placeholder="请输入重量"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>商品评分： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.averageScore"
                placeholder="请输入商品评分"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>一级分类： </label>
            <div class="inline-block">
              <el-select
                v-model="formData.catCode"
                style="width: 220px"
                placeholder="请选择一级分类"
                size="small"
                @change="oneSortChangeF"
              >
                <el-option
                  v-for="(item, index) in catCodeOpts"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>二级分类： </label>
            <div class="inline-block">
              <el-select
                v-model="formData.superCode"
                style="width: 220px"
                placeholder="请选择二级分类"
                size="small"
                @change="twoSortChangeF"
              >
                <el-option
                  v-for="(item, index) in superCodeOpts"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips"> </span>三级分类： </label>
            <div class="inline-block">
              <el-select
                v-model="formData.classCode"
                style="width: 220px"
                placeholder="请选择三级分类"
                size="small"
              >
                <el-option
                  v-for="(item, index) in classCodeOpts"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="item rich-text-item" style="height: 500px; ">
            <label for> <span class="tips">* </span>详情页： </label>
            <div class="inline-block" style="padding-left: 10px; height: 500px;">
              <richTextAssembly
                @changeSuccess="richTextChange"
                :value="formData.introduction"
              ></richTextAssembly>
              <!--                 
              <bg-editor
                :minHeight="500"
                :uploadUrl="formData.uploadApi"
                :content="formData.introduction"
                @editorData="handleBgEditChange"
              ></bg-editor> -->
            </div>
          </div>


        </div>
      </div>

      <div class="submit-option">
        <el-button v-if="!isEdit" @click="handleAdd" size="small" type="primary"
          >添加</el-button
        >
        <el-button v-else @click="handleEdit" size="small" type="primary"
          >编辑</el-button
        >
        <el-button @click="handleCancel" size="small" type="primary"
          >取消</el-button
        >
      </div>
    </div>
  </main-container>
</template>


<script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import date_edit from "@/components/subEditCon/dateEdit";
import upload_img from "@/components/subEditCon/uploadImgEdit";
import bg_editor from "@/components/bg-editor";

import richTextAssembly from "@/components/richTextAssembly.vue";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    // "input-edit": () => resolve(["@/components/subEditCon/inputEdit"]),
    // "select-edit": () => resolve(["@/components/subEditCon/selectEdit"]),
    "date-edit": date_edit,
    "upload-img": upload_img,
    "bg-editor": bg_editor,
    "richTextAssembly": richTextAssembly,
  },
  props: {},
  data() {
    return {
      showPageKey: 119, //刷新的key
      formData: {
        name: "",
        type: "",
        brandName: "",
        floorPrice: "",
        price: "",
        sellingPrice: "",
        inventory: "",
        state: "",
        imagePath: "",
        figurePath: "",
        images: "",
        generalRate: "",
        goodRate: "",
        uploadApi: API.common.upload,
        logisticsFees: "",
        param: "",
        productArea: "",
        saleUnit: "",
        wareQd: "",
        weight: "",
        averageScore: "",
        catCode: "", //一级
        superCode: "", //2级
        classCode: "", //3级
        merchantId: "", //商家
      },
      typeOpts: [
        { value: "1", label: "普消" },
        { value: "2", label: "易物" },
      ],
      stateOpts: [
        { value: "1", label: "上架" },
        { value: "2", label: "下架" },
      ],
      //一级分类
      catCodeOpts: [{ value: "", label: "请选择" }],
      //二级分类
      superCodeOpts: [{ value: "", label: "请选择" }],
      //三级分类
      classCodeOpts: [{ value: "", label: "请选择" }],
      //商家选择
      merchantIdOpts: [{ value: "", label: "请选择" }],

      undefined: [],

      isEdit: false,
      allMethods: "",
    };
  },

  mounted() {
    this.allMethods = this.getAllMethods();
    this.getSort_1(); //一级分类获取
    this.getStoreF(); //商家获取

    const id = this.$route.query.id;
    //有id获取编辑数据
    if (id) {
      this.getEditData(id);
      this.isEdit = true;
    }

    // //测试test
    // this.formData.testImgStr = "https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/a3ae8023-d02a-4f3b-9ce5-f5fcd33f1b96.jpg?Expires=1912753798&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=E2EAngZwKqN7QdBBWmUyD5KwZAM%3D,https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/bad5ad4d-5c21-443e-86b8-a407dec6b99f.jpg?Expires=1912753798&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=zYE6gfTWbYyP2QUse%2BZqceX3iKU%3D,https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/8fdd60e0-77af-4aa1-a82e-3087faf9cbc5.jpg?Expires=1912753798&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=gbXVuVghSP9iEcmMbDV4haKHljU%3D,https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/74d2f8ca-564e-4184-af9d-f66f0df36017.jpg?Expires=1912753799&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=0Oru0%2BjoKUNrMVr%2Bjh8rFd1Kqts%3D,https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/1e0280cd-fcab-4103-bf20-1fa7d91dd1c1.jpg?Expires=1912753799&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=sbcX8v22frNg%2BC4rbhqvk6LRAk8%3D";
  },

  //初始加载分类列表
  watch: {
    "formData.catCode"() {
      this.getSort_2();
    },
    "formData.superCode"() {
      this.getSort_3();
    },
  },
  methods: {
    //富文本改变
    richTextChange(content) {
      // console.log("文本内容："+content);
      console.log(content.length);
      this.formData.introduction = content;
    },

    /* 获取商家商品 */

    /* 一级分类change */
    oneSortChangeF() {
      this.formData.superCode = "";
      this.formData.classCode = "";
      this.getSort_2();
    },

    /* 二级分类change */
    twoSortChangeF() {
      this.formData.classCode = "";
      this.getSort_3();
    },

    //一级分类获取
    getSort_1() {
      this.allMethods.getSort_1();
    },
    //二级分类获取
    getSort_2() {
      this.allMethods.getSort_2();
    },
    //三级分类获取
    getSort_3() {
      this.allMethods.getSort_3();
    },

    /* 获取商家分类 */
    getStoreF() {
      this.allMethods.getStoreF();
    },

    //添加
    handleAdd() {
      let url = API.cur_goods_m.add;

      //非空校验
      var dataRes = jhTools.checkInputFormDataTool({
        tThis: this,
        dataArr: [
          "name",
          "type",
          "floorPrice",
          "sellingPrice",
          "state",
          "imagePath",
          "introduction",
          "merchantId",
        ],
        tipsObj: {
          name: "商品名称",
          type: "类型",
          floorPrice: "成本价",
          sellingPrice: "卖出价",
          state: "状态",
          imagePath: "商品主图",
          introduction: "详情页",
          merchantId: "商家选择",
        },
      });
      if (!dataRes) {
        return;
      }

      var {
        name,
        type,
        brandName,
        floorPrice,
        sellingPrice,
        inventory,
        state,
        imagePath,
        figurePath,
        images,
        generalRate,
        goodRate,
        introduction,
        logisticsFees,
        param,
        productArea,
        saleUnit,
        wareQd,
        weight,
        averageScore,
        catCode,
        superCode,
        classCode,
        merchantId,
      } = this.formData;

      let data = {
        name,
        type,
        brandName,
        floorPrice,
        sellingPrice,
        inventory,
        state,
        imagePath,
        figurePath,
        images,
        generalRate,
        goodRate,
        introduction,
        logisticsFees,
        param,
        productArea,
        saleUnit,
        wareQd,
        weight,
        averageScore,
        catCode,
        superCode,
        classCode,
        merchantId,
      };

      console.log("参数", data);
      jhTools.post(
        url,
        data,
        null,
        (res) => {
          console.log("结果", res);
          if (res.code == "200") {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$router.push({
              path: "/cur_goods_m_cur_goods_m_table",
              query: { ...this.$route.query },
            });
          } else {
            this.$message({
              type: "warning",
              message: res.message,
            });
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //获取数据
    getEditData(id) {
      let url = API.cur_goods_m.detail + "?id=" + id;
      const param = {
        id,
      };
      console.log("详情", param);
      jhTools.get(
        url,

        param,
        null,
        (res) => {
          console.log("获取数据详情", res);
          if (res.code == 200) {
            let formData = {};

            //详情页图片处理
            formData.images = res.data.images
              ? res.data.images.slice(1, -2).replace(/\"/g, "")
              : "";
            var imgArr = formData.images.split(",");
            imgArr = imgArr.map((item, index) => {
              return "https://" + item;
            });
            formData.images = imgArr.join(",");

            formData.name = res.data.name ? res.data.name + "" : "";
            formData.type = res.data.type ? res.data.type + "" : "";
            formData.brandName = res.data.brandName
              ? res.data.brandName + ""
              : "";
            formData.floorPrice = res.data.floorPrice
              ? res.data.floorPrice + ""
              : "";
            formData.price = res.data.price ? res.data.price + "" : "";
            formData.sellingPrice = res.data.sellingPrice
              ? res.data.sellingPrice + ""
              : "";
            formData.inventory = res.data.inventory
              ? res.data.inventory + ""
              : "";
            formData.state = res.data.state ? res.data.state + "" : "";
            formData.imagePath = res.data.imagePath
              ? res.data.imagePath + ""
              : "";
            formData.figurePath = res.data.figurePath
              ? res.data.figurePath + ""
              : "";
            formData.generalRate = res.data.generalRate
              ? res.data.generalRate + ""
              : "";
            formData.goodRate = res.data.goodRate ? res.data.goodRate + "" : "";
            formData.introduction = res.data.introduction
              ? res.data.introduction + ""
              : "";
            formData.logisticsFees = res.data.logisticsFees
              ? res.data.logisticsFees + ""
              : "";
            formData.param = res.data.param ? res.data.param + "" : "";
            formData.productArea = res.data.productArea
              ? res.data.productArea + ""
              : "";
            formData.saleUnit = res.data.saleUnit ? res.data.saleUnit + "" : "";
            formData.wareQd = res.data.wareQd ? res.data.wareQd + "" : "";
            formData.weight = res.data.weight ? res.data.weight + "" : "";
            formData.averageScore = res.data.averageScore
              ? res.data.averageScore + ""
              : "";
            formData.catCode = res.data.catCode ? res.data.catCode + "" : "";
            formData.superCode = res.data.superCode
              ? res.data.superCode + ""
              : "";
            formData.classCode = res.data.classCode
              ? res.data.classCode + ""
              : "";
            formData.merchantId = res.data.merchantId
              ? res.data.merchantId + ""
              : "";

            this.formData = formData;
            setTimeout(() => {
              this.showPageKey = 110; //更新视图
            }, 300);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //编辑提交
    handleEdit() {
      //非空校验
      var dataRes = jhTools.checkInputFormDataTool({
        tThis: this,
        dataArr: [
          "name",
          "type",
          "floorPrice",
          "sellingPrice",
          "state",
          "imagePath",
          "introduction",
          "merchantId",
        ],
        tipsObj: {
          name: "商品名称",
          type: "类型",
          floorPrice: "成本价",
          sellingPrice: "卖出价",
          state: "状态",
          imagePath: "商品主图",
          introduction: "详情页",
          merchantId: "商家选择",
        },
      });
      if (!dataRes) {
        return;
      }

      let url = API.cur_goods_m.edit;
      let id = this.$route.query.id;

      var {
        name,
        type,
        brandName,
        floorPrice,
        sellingPrice,
        inventory,
        state,
        imagePath,
        figurePath,
        images,
        generalRate,
        goodRate,
        introduction,
        logisticsFees,
        param,
        productArea,
        saleUnit,
        wareQd,
        weight,
        averageScore,
        catCode,
        superCode,
        classCode,
        merchantId,
      } = this.formData;

      let data = {
        id,
        name,
        type,
        brandName,
        floorPrice,
        sellingPrice,
        inventory,
        state,
        imagePath,
        figurePath,
        images,
        generalRate,
        goodRate,
        introduction,
        logisticsFees,
        param,
        productArea,
        saleUnit,
        wareQd,
        weight,
        averageScore,
        catCode,
        superCode,
        classCode,
        merchantId,
      };
      console.log("参数", data);
      jhTools.post(
        url,
        data,
        null,
        (res) => {
          console.log("结果", res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$router.push({
              path: "/cur_goods_m_cur_goods_m_table",
              query: { ...this.$route.query },
            });
          } else {
            //提示
            this.$message({
              type: "warning",
              message: res.message,
            });
          }
        },
        (err) => {
          console.log(err);
        },
        this,
        {
          fn: "config",
          noParams: [ 'param', "introduction"],
          isSetSearchStr: "false",
        }
      );
    },

    //图片上传
    handleUpload_1(imgArrStr) {
      this.formData.imagePath = imgArrStr;
    },

    //图片上传
    handleUpload_2(imgArrStr) {
      this.formData.figurePath = imgArrStr;
    },

    //图片上传
    handleUpload_3(imgArrStr) {
      this.formData.images = imgArrStr;
    },

    //取消返回
    handleCancel() {
      this.$router.push({
        path: "/cur_goods_m_cur_goods_m_table",
        query: { ...this.$route.query },
      });
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        //商家分类获取
        getStoreF() {
          var url = API.store_m.page;
          var data = {
            pageIndex: 1,
            pageSize: 10000,
            // "catCode": _this.formData.catCode,
            classType: "1",
          };
          console.log("参数", data);
          jhTools.post(
            url,
            data,
            null,
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                var opts = _this.merchantIdOpts ? _this.merchantIdOpts : [];
                var records = res.data.records || res.data || [];
                records.forEach((item, index) => {
                  opts.push({
                    label: item.name + "",
                    value: item.id + "",
                  });
                });
                _this.merchantIdOpts = opts;
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },

        //一级分类获取
        getSort_1() {
          var url = API.jd_sort_m.page;
          var data = {
            pageIndex: 1,
            pageSize: 10000,
            // "catCode": _this.formData.catCode,
            classType: "1",
          };
          console.log("参数", data);
          jhTools.post(
            url,
            data,
            null,
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                var opts = _this.catCodeOpts ? _this.catCodeOpts : [];
                var records = res.data.records || res.data || [];
                records.forEach((item, index) => {
                  opts.push({
                    label: item.className + "",
                    value: item.classCode + "",
                  });
                });
                _this.catCodeOpts = opts;
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },

        //二级分类获取
        getSort_2() {
          var url = API.jd_sort_m.page;
          var data = {
            pageIndex: 1,
            pageSize: 10000,
            catCode: _this.formData.catCode,
            classType: "2",
          };
          console.log("参数", data);
          jhTools.post(
            url,
            data,
            null,
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                //清空
                _this.superCodeOpts = [];
                var opts = _this.superCodeOpts ? _this.superCodeOpts : [];

                var records = res.data.records || res.data || [];
                console.log(_this.superCodeOpts);
                records.forEach((item, index) => {
                  opts.push({
                    label: item.className + "",
                    value: item.classCode + "",
                  });
                });
                if (_this.formData.catCode) {
                  _this.superCodeOpts = opts;
                }
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },
        //三级分类获取
        getSort_3() {
          var url = API.jd_sort_m.page;
          var data = {
            pageIndex: 1,
            pageSize: 10000,
            superCode: _this.formData.superCode,
            classType: "3",
          };
          console.log("参数", data);
          jhTools.post(
            url,
            data,
            null,
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                //清空
                _this.classCodeOpts = [];
                var opts = _this.classCodeOpts ? _this.classCodeOpts : [];
                var records = res.data.records || res.data || [];
                records.forEach((item, index) => {
                  opts.push({
                    label: item.className + "",
                    value: item.classCode + "",
                  });
                });
                if (_this.formData.superCode) {
                  _this.classCodeOpts = opts;
                }
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

/* 操作栏相关*/

.content {
  min-height: 100%;
}

.top-option {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  margin: 0 30px;
  padding: 10px 0;

  .left-box {
    padding-left: 30px;
    max-width: 900px;

    .sub {
      float: left;
      width: 200px;
      margin-left: 10px;
      margin-top: 10px;
    }
  }

  .right-box {
    padding-right: 30px;
    // min-width: 300px;

    .sub {
      float: right;
      margin-left: 10px;
      margin-top: 10px;
    }
  }
}

/* 操作栏相关*/

/* 输入*/
.edit-wrap {
  padding: 40px;
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;

  label {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .tips {
    color: #f10215;
  }
  // //标题
  // .title {
  //   height: 46px;
  //   font-size: 14px;
  //   padding-left: 20px;
  //   font-weight: bold;
  //   line-height: 46px;
  // }

  .top-input {
    .item {
      margin-top: 20px;

      &.img-item {
        display: flex;
        flex-direction: row;
        // margin-bottom: -36px;

        .inline-block {
          max-height: 180px;
          overflow-y: auto;
          padding-right: 10px;
        }
        //隐藏滚动条
        .inline-block::-webkit-scrollbar {
          width: 0 !important;
        }
      }

      &.rich-text-item {
        display: flex;
        flex-direction: row;
        // margin-bottom: -36px;

        .inline-block {
          max-height: 160px;
        }
      }
    }
  }

  //标题描述类
  .title-text {
    font-size: 15px;
    line-height: 22px;
    padding-left: 30px;
  }
}

.submit-option {
  width: 300px;
  padding-top: 80px;
  padding-bottom: 60px;
  padding-left: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

//调整element 样式
.inline-block {
  display: inline-block;
  margin-left: 22px;
  &.id {
    padding-left: 20px;
  }
  el-input {
    width: 20px !important;
  }

  //单项选择
  .radio-box {
    // width: 70px;
    display: inline-block;
    text-align: left;
  }
  .radio-box:nth-child(1) {
    // margin-left: -40px;
  }
}

/* 上传按钮样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 107px;
  height: 107px;
  line-height: 107px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.avatar {
  width: 107px;
  height: 107px;
  display: block;
}
</style>